Ccay.Module.define("Ccay.example.ui.chart.jqplot",function(page,$S){
	page.ready=function(){
		/*
		 * 初始化
		 */
		$S("#barDemo").ccayTab({
			fnAfterSelectItem: function(tabId){
				if(tabId == 'pointChart' && !$S("#pointChart").hasClass("jqplot-target")){
					renderPointChart();
				}else if(tabId == 'pointChart2' && !$S("#pointChart2").hasClass("jqplot-target")){
					renderPointLineChart();
				}else if(tabId == 'pointLineChart' && !$S("#pointLineChart").hasClass("jqplot-target")){
					renderPointChart2();
				}
			}
		});
	}
	/*
	 * 点图
	 */
	var renderPointChart = function(){
		$S("#pointChart").chart2({
			ajax:{
				url:'ccay/example/ui/chart/datas2.json'
			},
			fnConvert:function(item){
				var result = [];
				var temp1 = [];
				var temp2 = [];
				var temp3 = [];
				for (var idx = 0; idx < item.length; idx++) {
					temp1.push(item[idx]['profit']);
					temp2.push(item[idx]['total']);
					temp3.push(temp2[idx]-temp1[idx]);
				}
				result.push(temp1);
				result.push(temp2);
				result.push(temp3);
				
				return result;
	        },
			skin: {
				highlighter : Ccay.UI.Chart.defaultHighlighter,
				axesDefaults: {
				      labelRenderer: $.jqplot.CanvasAxisLabelRenderer
				    },
				    seriesDefaults: {
				    	showLine: false,
				        rendererOptions: {
				            smooth: true
				        }
				    },
				    series:[{label:'月度利润',markerOptions: {size:7, style:'circle'}},
				            {label:'月度销售额',markerOptions: {size:7, style:'filledDiamond'}},
				            {label:'月度支出',markerOptions: {size:7, style:'filledSquare'}}
				           ],
				    legend: { show:true }
			},
			click: function (ev, seriesIndex, pointIndex, data) {
				Ccay.UI.topBox("The seriesIndex is {0}, pointIndex is {1}, x is {2}, y is {3}. 注册 click 事件并显示明细数据或者Chart可以达到钻取的效果。".formatValue( seriesIndex, pointIndex , data[0], data[1]));
            }
		}); 
	}
	/*
	 * 点线图
	 */
	var renderPointChart2 = function(){
		$S("#pointLineChart").chart2({
			ajax:{
				url:'ccay/example/ui/chart/datas2.json'
			},
			skin:{highlighter : Ccay.UI.Chart.defaultHighlighter},
			convertArrayType: 2,
		    convertFields: ['profit','total']
		});		 
	}
	
	/*
	 * 点线图(高亮提示)
	 */
	var renderPointLineChart = function(){
		var cosPoints = [];
		for (var i=0; i<2*Math.PI; i+=1){ 
		  cosPoints.push([i, Math.cos(i)]); 
		}
		 
		var sinPoints = []; 
		for (var i=0; i<2*Math.PI; i+=0.4){ 
		   sinPoints.push([i, 2*Math.sin(i-.8)]); 
		}
		 
		var powPoints1 = []; 
		for (var i=0; i<2*Math.PI; i+=1) { 
		    powPoints1.push([i, 2.5 + Math.pow(i/4, 2)]); 
		}
		  
		var powPoints2 = []; 
		for (var i=0; i<2*Math.PI; i+=1) { 
		    powPoints2.push([i, -2.5 - Math.pow(i/4, 2)]); 
		} 
		
		$S("#pointChart2").chart2({
			data:[cosPoints,sinPoints,powPoints1,powPoints2],
			skin: {
				seriesDefaults: {
			        rendererOptions: {
			            smooth: true
			        }
			    },
			    highlighter : Ccay.UI.Chart.defaultHighlighter,
			    series:[ 
			        {
			          markerOptions: { style:'dimaond' }
			        }, 
			        {
			          showLine:false, 
			          markerOptions: { size: 7, style:"x" }
			        },
			        { 
			          markerOptions: { style:"circle" }
			        }, 
			        {
			          markerOptions: { style:"filledSquare", size:10 }
			        }
			    ]
			}
		});
	}
	
})